import React, { Component } from 'react';
import Logo from '../../components/logo/Logo';
import {  WingBlank, WhiteSpace, Flex} from 'antd-mobile';
import { connect } from 'react-redux';
import { LoginAction } from '../../actions/user';
import { Form, Input, Button, Divider, message } from 'antd';
import { LockOutlined, MailOutlined, QqCircleFilled, WechatOutlined } from '@ant-design/icons';

import './login.css'

class Login extends Component {
    constructor(props) {
        super(props);
        this.state={
            userEmail:'',
            userPwd:''
        }
        this.register = this.register.bind(this)
    }
    // componentWillMount = () =>{
    //     let user = localStorage.getItem('user')
    //     user = JSON.parse(user)
    //     if (user === null) {
    //         return
    //     }
    //     this.setState({
    //         userEmail:user.data.
    //     })
    // }
    register() {
        this.props.history.push('/register');
    }

    onFinish =userData=> {
        let self = this
        console.log(userData)
        this.props.LoginAction(userData).then(
            () => {
                console.log(this.props.state)
                if (this.props.state.code === 0) {
                        message.success('登录成功 ！',2).then(() =>{
                            localStorage.setItem('user', JSON.stringify(this.props.state))
                            self.props.history.push('home')
                        })
                       
                } else {
                    message.error('用户不存在或密码错误');
                }
            }
        )
    }
    componentDidMount =() =>{
        console.log(this.context);
    }
    render() {
        return (
            <div>
                {/* <h2>登录</h2> */}
                <WingBlank size='lg'>
                    <Logo></Logo>
                  
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            name="userEmail"
                            // label="E-mail"
                            rules={[
                                {
                                    type: 'email',
                                    message: '此邮箱无效!',
                                },
                                {
                                    required: true,
                                    message: '请输入你的 E-mail!',
                                },
                            ]}
                        >
                            <Input prefix={<MailOutlined className="site-form-item-icon" />} placeholder="E-mail"
                                size='large'
                            />

                        </Form.Item>
                        <Form.Item
                            name="userPwd"
                            rules={[{ required: true, message: 'Please input your Password!' }]}
                        >
                            <Input.Password
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                                size='large'
                                maxLength={20}
                            />
                        </Form.Item>
                        <WhiteSpace size='lg'/>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" block  size='large'
                            style={{height:'47px'}}
                            ><span style={{fontSize:18}}>登录</span> </Button>
                        </Form.Item>
                    </Form>
                    <Flex>
                        {/* <Flex.Item>
                            <p type='primary'>忘记密码 ?</p>
                        </Flex.Item> */}
                        <Flex.Item >
                            <p type='primary' onClick={this.register} className='register'>
                                <span style={{color:'#999'}}>还没有账号？</span>
                          注册账号</p>
                        </Flex.Item>
                    </Flex>
                </WingBlank>
                <div className='login-footer'>
                    <div className='dsf-login'>
                        <Divider><span style={{color:'#999',fontSize:14}}> 第三方登录</span> </Divider>
                        <div className='dsf-img'>
                            <QqCircleFilled style={{ fontSize: 32, color:'#1890ff'}}/>
                            <WechatOutlined style={{ fontSize: 32, color:'#83D944'}}/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        state: state.user
    }
}
const actionCreator = { LoginAction }
export default connect(mapStateToProps, actionCreator)(Login);